<template>
  <div class="width hello">
    <!---->
      <nav>
        <a class="nav-zuo" href="#/fromtt">
            <i class="fa fa-map-marker"></i> {{dizhi}}
        </a>
        <!--<input type="text"  placeholder="搜索">-->
            <a class="input" href="#/seek">
                <i class="fa fa-search"></i>
            </a>
        <a v-if="!datas && !post" class="nav-you" href="#/login">
            登录
        </a>
        <a v-if="datas" class="nav-you" @click="tuichu">
            退出
        </a>
        <a v-if="post" class="nav-you" @click="tuichu">
            退出
        </a>
      </nav>
      <!--自动轮播-->
    <div>
        <swiper :list="baseList"  auto ></swiper>
    </div>
    <!--手动轮播-->
     <div class="xiao">
        <swiper dots-position="center" v-model="demo01_index">
            <swiper-item v-for="list in lists">
                <ul class="list">
                    <li class="li" v-for="item in list">
                        <div><img :src="item.img" alt=""></div>
                        <span>{{item.name}}</span>
                    </li>
                </ul>
            
            </swiper-item>
        </swiper>
      </div>
    <!--竖的轮播-->
    <div class="kuai">
      <img src="../assets/05.png" alt="">
      <span class="fa fa-volume-up"></span>
      <swiper auto height="30px" direction="vertical" :interval=2000 class="text-scroll" :show-dots="false">
        <swiper-item><p>浙商卡满50立减49</p></swiper-item>
        <swiper-item><p>日用百货 生活狂欢1元起</p></swiper-item>
        <swiper-item><p>内衣99减30，跨店铺199减100</p></swiper-item>
      </swiper>
    </div>
    <!--分割线-->
    <div class="fenge"></div>
    <div class="fenge">
      <p></p>
        <span>特色频道</span>
      <p></p>
    </div>
    <!--静态-特色频道-->
    <ul>
      <li class="li1"><img src="../assets/06.jpg" alt=""></li>
      <li class="li2"><img src="../assets/07.jpg" alt=""></li>
      <li class="li2 li3"><img src="../assets/08.jpg" alt=""></li>
    </ul>
    <!--分割线-->
    <div class="fenge"></div>
    <div class="fenge" style="color:#d7063b">
      <p></p>
        <span>推荐商品</span>
      <p></p>
    </div>
    <div class="sort">
        <p>排序：
          <b  @click="sort" > 价格
            <i v-if="isTop" class="fa fa-long-arrow-down"></i>
            <i v-if="!isTop" class="fa fa-long-arrow-up"></i>
          </b>
        </p>
      </div>
    <div class="tshop">
        <ul>
            <!--{{shops}}-->
            <li v-for="shop in shops">
                <a :href="`#/xiang/${shop._id}`">
                    <div v-for="pict in shop.productImage"  class="img">
                        <img :src="`http://localhost:2222/images/photos/${pict}`" alt="">
                    </div>
                    <p class="p">{{shop.name}}</p>
                    <div class="div">
                        ¥ {{shop.yuanPrice}}
                        <span>¥{{shop.price}}</span>
                        <a href="" @click.prevent="addcar" :target="`${shop._id}`" class="fa fa-shopping-cart">
                        </a>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <home-footer></home-footer>
  </div>
</template>
<script>

        $(window).scroll(function(){
            if($(document).scrollTop() >= 100){
                $('nav').addClass('active')
            }else{
                $('nav').removeClass('active')
            }
        })
        
        


    import axios from 'axios'
    import bus from '../assets/bus'
  import HomeFooter from '../components/HomeFooter'; 
  import { Group, Cell, Swiper, SwiperItem } from 'vux';
  const baseList = [{
          url: 'javascript:',
          img: '//img02.fn-mart.com/pic/8939133c96682337d4b5/hn8zzz7zvntgBdZlX2/simaoaDG3YJ9eG/CsmRsVn5bO2ASKDWAAW5q4WwBkk567_org_q75s500.jpg'
          }, {
          url: 'javascript:',
          img: '//img06.fn-mart.com/pic/cd12133c917a186c41d0/K282nn7n_TLMKlVgXn/1xmyeava390YWR/CsmRsVn32USAYAQlAAN6mxbJEEE562_org_q75s500.jpg'
          }, {
          url: 'javascript:',
          img: '//img06.fn-mart.com/pic/7068133c91632a517220/B28nnn5TDnClhgZd3z/7imGeaFGjinRoG/CsmRsVn28e-AX3ffAAOZ5GT4BCg707_org_q75s500.jpg',
          }, {
          url: 'javascript:',
          img: '//img02.fn-mart.com/pic/254b133c916a2a4f4ee4/Bz6Tnn1zvzfdhMugO2/5YSGeGFROYnRSy/CsmRsln28cyAMiJdAAXX6ZFONA8067_org_q75s500.jpg',
          }, {
          url: 'javascript:',
          img: '//img02.fn-mart.com/pic/e76f133c917c1c0aafc6/BTHnzz5z_ztMBgUd3n/1iSGSaDaO9pY0Y/CsmRsln38qqAdSVeAAJrDcc3v9A415_org_q75s500.jpg',
          fallbackImg: '//img02.fn-mart.com/pic/8939133c96682337d4b5/hn8zzz7zvntgBdZlX2/simaoaDG3YJ9eG/CsmRsVn5bO2ASKDWAAW5q4WwBkk567_org_q75s500.jpg'
      }]
  export default {

    components: {
      Group,
      Cell,
      Swiper,
      SwiperItem,
      HomeFooter
    },
    data () {
      return {
        baseList:baseList,
        demo01_index:0,
        shops:[],
        datas:'',
        post:'',
        dizhi:'上海',
        isTop:true,
        foodLists:[
          
          {
              name:'极速达',
              img:'//img04.fn-mart.com/pic/7ed7133d8a9127c136b9/hT8nTTs2v2LgBMuM32/5YmRSyJGOY3ihy/CsmRsVkcCbOAIk4GAAAg-LdGWGY577_org_q75s500.png'
          },
          {
              name:'进口好货',
              img:'//img02.fn-mart.com/pic/a13e133a1fbadcaee89d/hz8zzz7nFTfdBlUgjz/1YoaSRLG2avRTa/CsmRslgGzsaAbiGUAABCLjUbLhk163_org_q75s500.png'
          },
          {
              name:'飞牛商城',
              img:'//img04.fn-mart.com/pic/d383133a1fb5dcafa576/Bnq2zz72_2fMKdudf2/1YmRmafGoGpGpY/CsmRr1gGztKATxVDAAA3VBmSEGo845_org_q75s500.png'
          },
          {
              name:'生鲜',
              img:'//img04.fn-mart.com/pic/7770133d8a942830deb0/B2q2TT5T_zLMBMZdX2/5xeamRJajxX9da/CsmRslkcDd2AaFiNAABD3Ad645k199_org_q75s500.png'
          },
          {
              name:'母婴',
              img:'//img03.fn-mart.com/pic/f86f133a1fb4dcb02c1b/hzq2221nv2tdhlugf2/5xmRoatRmGPRMa/CsmRsFgGztqAV5mTAAA2nE09VMY992_org_q75s500.png'
          },
          {
              name:'服装城',
              img:'//img03.fn-mart.com/pic/1d49133a1fbcdcb5e1c0/BT62nn72_zClhdZMX2/sYSReGfa2RFaTR/CsmRslgGzw6APNqBAAA6-fE9ybQ614_org_q75s500.png'
          },
          {
              name:'手机充值',
              img:'//img02.fn-mart.com/pic/4bb5133a1fb9dcb68c59/h26n22sT_2tMKludLn/7YSySGtaoaWyWi/CsmRr1gGzvSAdpb2AAAsha1QbHc098_org_q75s500.png'
          },
          {
              name:'自创品牌',
              img:'//img06.fn-mart.com/pic/412d133a25c719bc368e/hn8T225nD2LMklVdfn/5xSGeaCRfGTRpy/CsmRr1grylOAe1j3AAAYxcblbwc741_org_q75s500.png'
          },
          {
              name:'曾经购买',
              img:'//img06.fn-mart.com/pic/6234133a1fb7dcb9a99e/hn8zzz7zvntgBdZlX2/5YmRSyLGzaDany/CsmRsVgGzvmAQczEAAAwGHmm3hw450_org_q75s500.png'
          },
          {
              name:'曾经购买',
              img:'//img06.fn-mart.com/pic/7369133a1fbadcb538a4/Kz6Tnn72FztdBlul3z/1Yeamata2GFRTa/CsmRsVgGzwOAZ5rQAAAu74AIIKI741_org_q75s500.png'
          },
          {
              name:'品牌特卖',
              img:'//img03.fn-mart.com/pic/9a35133a1fbadcb69661/hn8zzz7zvntgBdZlX2/1YoaoRtR2aDR2G/CsmRslgGzxmAD5q4AAA8rW7EZrw000_org_q75s500.png'
          },
          {
              name:'领券中心',
              img:'//img06.fn-mart.com/pic/d859133a1fb4dcb105dd/hTqTnns2DnLdBgZMtT/59oGmGCGmyWGgG/CsmRsFgGzuiAMXNnAAA7ECbe2X4351_org_q75s500.png'
          },
          {
              name:'秒杀',
              img:'//img04.fn-mart.com/pic/ca74133a1fb9dcb62143/BzHznn5T_2tlKguMj2/5xeRmata2GFana/CsmRsVgGzxKASImjAAA4hB77ftA958_org_q75s500.png'
          },
          {
              name:'飞牛团',
              img:'//img03.fn-mart.com/pic/0416133a1fb4dcb655d7/hn8zzz7zvntgBdZlC2/79eGmGLaSG0a0x/CsmRr1gGzxWAcOxaAAAt9pOzNxU766_org_q75s500.png'
          },
          {
              name:'电器城',
              img:'//img06.fn-mart.com/pic/1243133a1fbcdcb6e7b7/Bz6Tnn1zvzfdhMugf2/sioyeytaSRpGla/CsmRsFgGzx6AYj7GAAAqqyDowCY988_org_q75s500.png'
          },
          {
              name:'我的收藏',
              img:'//img06.fn-mart.com/pic/918a133a29ca19a4a134/Kz62zz12DTtlkdult2/1YoaoRtRuaE9LG/CsmRsFghPXqADClgAAAx0f1Z-FM908_org_q75s500.png'
          }
          
        ],
        num:1
      }
    },
    computed:{
        lists:function(){
            var num = 8;
            var arr = [];
            var start = 0;
            var count = Math.ceil(this.foodLists.length / 8);
            for(var i = 0; i < count; i++){
                arr.push(this.foodLists.slice(start,start + 8));
                start += 8;
            }
            console.log(arr)
            return arr;
        }
    },
    mounted:function(){
        var that = this;
        axios.get(`los/shopp?limit=${this.num}`).then(function(data){
            that.shops = data.data.message;
        }).catch(function(err){
            console.log(err);
        })
          var isShow = false;
            window.onscroll = function(){
                var heig =document.body.clientHeight;
                var scroll =document.documentElement.scrollTop ||document.body.scrollTop;
                var windH =window.innerHeight;
                if(scroll + windH > heig - 30){
                    if(!isShow){
                        isShow = true;
                        axios.get(`los/shopp?limit=${that.num += 1}`).then(function(data){
                            // console.log('============');
                        that.shops = data.data.message;
                            isShow = false
                            // that.shops
                        }).catch(function(err){
                            console.log(err);
                        })
                    }
                }
            }

        axios.get('los/login').then(function(data){
                that.datas = data.data.message.name;
                that.post = data.data.message.post;
        }).catch(function(err){
            console.log(err);
        })
        

    },
    methods:{
        sort:function(){
            this.shops.reverse();
        },
        addcar:function(ev){
            console.log(ev.currentTarget.target)
            var ha = ev.currentTarget.target;
            console.log(ha)
            axios.post('los/addcart',{shop_id:ha}).then(function(result){
                console.log(result);
                alert('已经添加至购物车')
            }).catch(function(err){
                console.log(err);
            })
        },
        tuichu:function(){
            axios.get('los/tuichu').then(function(data){
                alert('退出成功')
                location.reload()
            }).catch(function(err){
                console.log(err);
            })
        }
    }
    
    

  }
</script>

<style scoped>
    .sort{
        padding: 10px;
    }
    .active{
        background: #d7063b;
    }
    .div{
        padding: 5px;
        color: #d7063b;
        position: relative;
    }
    .div span{
        color: #aaa;
        font-size: 14px;
        text-decoration:line-through
    }
    .div a{
        display: block;
        position: absolute;
        border: 1px solid #d7063b;
        bottom: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        color: #d7063b;
        font-size: 20px;
        padding: 4px;
        border-radius: 50%;
    }
    .p{
        padding: 0 5px;
        font-size: 14px;
        color: #333;
    }
    .width{
        margin-bottom: 100px;
    }
    .img{
        
        height: 150px;
        text-align: center;
        padding-top: 20px;
    }
    .img img{
        width: 50%;
    }
  .width > ul,.tshop ul{
    overflow: hidden;
  }
  .width > ul li, .tshop ul li{
    float: left;
    list-style: none;
  }
  .tshop ul li{
      width: 50%;
      box-sizing: border-box;
      border: 0.1px solid #eee;
  } 
  .width > ul li img{
    width: 100%;
  }
  .li1{
    width: 46%;
    border-right: 1px solid #ccc;
  }
  .li2{
    width: 54%;
  }
  .li3{
    border-top: 1px solid #ccc;
  }
  .fenge{
    padding: 5px;
    background: #eee;
    line-height: 26px;
    color: #ae1f7d;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .fenge > p{
    display: inline-block;
    border-top: 1px solid #ae1f7d;
    width: 30px;
    margin: 0 10px 5px; 
  }
  .kuai{
    height: 35px;
    color: #d7063b;
    font-size: 14px;
    overflow: hidden;
  }
  .kuai img{
    display: block;
    height: 100%;
    float: left;
  }
  .kuai span{
    display:block;
    font-size: 15px;
    float: left;
    padding: 0 15px;
    border-left: 1px solid #ccc;
    height: 15px;
    margin-top: 11px;
  }
  .text-scroll p{
    font-size: 13px;
    line-height: 35px;
  }
    nav{
        padding: 0 15px;
        text-align: center;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 666;
        overflow: hidden;
        font-size: 16px;
        color: #666;
    }
    nav > .input  i{
        position: absolute;
        left: 10px;
        top: 5px;
        font-size: 16px;
        color: #666;
    }
    nav > .input{
        display: inline-block;
     width: 65%;   
     height: 28px;
     margin: 5px 0px;
     background: #fff;
     font-size: 14px;
     padding-left: 25px;
     border-radius: 3px;
     border: 1px solid #ccc;
     position: relative;
    }
    nav > a{
        margin-top: 5px;
        color: #fff;
    }
    .nav-zuo{
      float: left;
    }
    .nav-you{
      float: right;
    }
    .xiao{
        overflow: hidden;
    }
    .xiao ul li{
    box-sizing: border-box;
    list-style: none;
    float: left;
    width: 25%;
    height: 80px;
    text-align: center;
    font-size: 12px;
    }
    .li  img{
        display: block;
        width: 35px;
        margin: 10px auto;
    }
    .xiao ul li span{
        display: block;
    }
</style>

















